<template>
  
  <div>
    <client-only>
    <!-- 轮播图 开始 -->
    <div style="height: 500px;"></div>
    <ul id="banner"></ul>
    
    <!--<div v-swiper:mySwiper="swiperOption"  class="mySwiper">
        <div class="swiper-wrapper">
            <div v-for="banner in bannerList" :key="banner.id" class="swiper-slide" style="background: #040B1B;">
                <a :href="banner.linkUrl">
                    <img :src="banner.imageUrl" :alt="banner.title">
                </a>
            </div>
        </div>
        <div class="swiper-pagination swiper-pagination-white"></div>
        <div class="swiper-button-prev swiper-button-white" slot="button-prev" @click="prev()"></div>
        <div class="swiper-button-next swiper-button-white" slot="button-next" @click="next()"></div>
    </div>-->
    <!-- 轮播图 结束 -->
    
     <div id="aCoursesList">
      <!-- 网校课程 开始 -->
      <div>
        <section class="container">
          <header class="comm-title">
            <h2 class="tac field">
              <span class="c-333">小编推荐</span>
              <a href="/course" title="全部课程"><span class="allCourse">全部&nbsp;></span></a>
            </h2>
          </header>
          <div>
            <article class="comm-course-list">
              <ul class="of" id="bna">
                <li v-for="course in courseList" :key="course.id">
                  <div class="cc-l-wrap">
                    <section class="course-img">
                      <img
                        :src="course.cover"
                        class="img-responsive"
                        :alt="course.title"
                      >
                      <div class="cc-mask">
                        <a :href="'/course/'+course.id" title="开始学习" class="comm-btn c-btn-1">开始学习</a>
                      </div>
                    </section>
                    <h3 class="hLh30 txtOf mt10">
                      <a :href="'/course/'+course.id" :title="course.title" class="course-title fsize18 c-333">{{course.title}}</a>
                    </h3>
                    <section class="mt10 hLh20 of">
                      <!--<span class="fr jgTag bg-green" v-if="Number(course.price) === 0">
                        <i class="c-fff fsize12 f-fA">免费</i>
                      </span>-->
                      <span class="fl jgAttr c-ccc f-fA">
                        <i class="c-999 f-fA">{{course.viewCount}}人学习</i>
                        |
                        <i class="c-999 f-fA">{{commentCountList[course.id]}}评论</i>
                      </span>
                    </section>
                  </div>
                </li>
                
              </ul>
              <div class="clear"></div>
            </article>
          </div>
        </section>
      </div>
      <!-- /网校课程 结束 -->
      <!-- 最新课程 开始 -->
      <div>
        <section class="container">
          <header class="comm-title">
            <h2 class="tac field">
              <span class="c-333">最新课程</span>
              <a href="/course" title="全部课程"><span class="allCourse">全部&nbsp;></span></a>
            </h2>
          </header>
          <div>
            <article class="comm-course-list">
              <ul class="of" id="bna">
                <li v-for="course in newCourseList" :key="course.id">
                  <div class="cc-l-wrap">
                    <section class="course-img">
                      <img
                        :src="course.cover"
                        class="img-responsive"
                        :alt="course.title"
                      >
                      <div class="cc-mask">
                        <a :href="'/course/'+course.id" title="开始学习" class="comm-btn c-btn-1">开始学习</a>
                      </div>
                    </section>
                    <h3 class="hLh30 txtOf mt10">
                      <a :href="'/course/'+course.id" :title="course.title" class="course-title fsize18 c-333">{{course.title}}</a>
                    </h3>
                    <section class="mt10 hLh20 of">
                      <!--<span class="fr jgTag bg-green" v-if="Number(course.price) === 0">
                        <i class="c-fff fsize12 f-fA">免费</i>
                      </span>-->
                      <span class="fl jgAttr c-ccc f-fA">
                        <i class="c-999 f-fA">{{course.viewCount}}人学习</i>
                        |
                        <i class="c-999 f-fA">{{commentNewCountList[course.id]}}评论</i>
                      </span>
                    </section>
                  </div>
                </li>
                
              </ul>
              <div class="clear"></div>
            </article>
          </div>
        </section>
      </div>
      <!-- 最新课程 结束 -->
      <!-- 网校名师 开始 -->
      <div>
        <section class="container">
          <header class="comm-title">
             <h2 class="tac field">
              <span class="c-333">名师大咖</span>
              <a href="/teacher" title="全部课程"><span class="allCourse">全部&nbsp;></span></a>
            </h2>
          </header>
          <div>
            <article class="i-teacher-list">
              <ul class="of">
                <li v-for="teacher in teacherList" :key="teacher.id">
                  <section class="i-teach-wrap">
                    <div class="i-teach-pic">
                      <a href="/teacher/1" :title="teacher.name">
                        <img :alt="teacher.name" :src="teacher.avatar">
                      </a>
                    </div>
                    <div class="mt10 hLh30 txtOf tac">
                      <a href="/teacher/1" :title="teacher.name" class="fsize18 c-666">{{teacher.name}}</a>
                    </div>
                    <div class="hLh30 txtOf tac">
                      <span class="fsize14 c-999">{{teacher.career}}</span>
                    </div>
                    <div class="mt15 i-q-txt">
                      <p
                        class="c-999 f-fA"
                      >{{teacher.intro}}</p>
                    </div>
                  </section>
                </li>
                
                
              </ul>
              <div class="clear"></div>
            </article>
          </div>
        </section>
      </div>
      <!-- /网校名师 结束 -->
    </div>
    </client-only>
  </div>
</template>
<script>
import banner from '@/api/banner'
import hotCourseTeacher from '@/api/hot'
export default {
  data () {
    return {
      swiperOption: {
        loop:true, //循环

        //配置分页
        pagination: {
          el: '.swiper-pagination',//分页的dom节点
          clickable:true,
        },
        //前进后退按钮
        navigation: {
          nextEl: '.swiper-button-next',//下一页dom节点
          prevEl: '.swiper-button-prev'//前一页dom节点
        }
      },
      bannerList:[],
      courseList:[],
      commentCountList:[],
      teacherList:[],
      newCourseList:[],
      commentNewCountList:[]
    }
  },
  created () {
    this.getAllBanner()
    this.getHotCourseTeacher()
    this.getNewCourse()
  },
  mounted(){
    //延时使initBanner中可以使用vue实例中的数据，否则mounted不会等到created中的api数据接收完后才执行
    setTimeout(() => {
     this.initBanner()
    }, 1000)
    //if(process.client){
     // console.log('client')
      //this.initBanner()
    //}
  },
  methods: {

    prev() {
        this.mySwiper.slidePrev()
    },
    next() {
        this.mySwiper.slideNext();
    },

    getNewCourse(){
      hotCourseTeacher.getNewCourse()
        .then(res=>{
          this.newCourseList=res.data.data.newCourseList
          this.commentNewCountList=res.data.data.commentCountList
        })
    },
    getHotCourseTeacher(){
      hotCourseTeacher.getHotCourseTeacher()
        .then(res=>{
          this.courseList=res.data.data.courseList
          this.teacherList=res.data.data.teacherList
          this.commentCountList=res.data.data.commentCountList
        })
    },

    getAllBanner(){
      banner.getListBanner()
        .then(res=>{
          this.bannerList=res.data.data.list
        })
    },
    initBanner(){
      let that=this
      //console.log(this.bannerList)
      let timer=setInterval(get_next,3000)
      let sz =new Array();
      let szdiv=new Array();
      var cur_ul = document.getElementById("banner");
      for(let i =0;i<this.bannerList.length;i++){/*给其插入其他子标签*/
        
        var cur_li = document.createElement("li");/**/
        var cur_img = document.createElement("img"); /**/
        
        console.log(this.bannerList[i])
        cur_img.src = this.bannerList[i].imageUrl;
        //cur_img.src = "image/" + i+".png";/*设置属性*/
        cur_img.style.width ="800px";/**/
        cur_img.style.height ="400px";/**/
        cur_li.appendChild(cur_img);/**/

        cur_img.onclick = function(){
          //console.log(window.location.origin)
          let subLink=that.bannerList[i].linkUrl.substring(0,4);
          if(subLink=="http")
            window.location.href=that.bannerList[i].linkUrl;
          else
            window.location.href= window.location.origin + that.bannerList[i].linkUrl;
        }

        cur_li.onmouseenter = function(){/**/
          clearInterval(timer); /**/
        }
							 
        cur_li.onmouseleave = function(){/**/
          timer = setInterval(get_next,3000);/**/
        }

        if(i!=5){
          cur_li.id=5-i;
        }else{
          cur_li.id=5
        }

        cur_ul.appendChild(cur_li);/**/
        sz.push(cur_li);/**/
        sz[sz.length-1].style.left = "0px";/*每次添加往数组添加的时候设置添加的元素靠左*/

        let bottom_div = document.createElement("div");/**/
        bottom_div.style.left = "54%";/**/
        bottom_div.style.marginLeft=-25*(5-i)+"px"
        bottom_div.name = i;/**/
        szdiv.push(bottom_div);/**/
        cur_ul.appendChild(bottom_div);/**/

      }

      let pre_img = document.createElement("img");/**/
      pre_img.src = "image/perImg.png"/**/
      pre_img.style.position ="absolute";/**/
      pre_img.style.left = 0;/**/
      pre_img.style.top =0;/**/
      pre_img.style.bottom =0;/**/
      pre_img.style.margin = "auto"/**/
      pre_img.style.zIndex =100;/**/
      cur_ul.appendChild(pre_img);/**/

      let nex_img = document.createElement("img");/**/
      nex_img.src = "image/nexImg.png";/**/
      nex_img.style.position ="absolute";/**/
      nex_img.style.right = 0;/**/
      nex_img.style.top =0;/**/
      nex_img.style.bottom =0;/**/
      nex_img.style.margin = "auto"/**/
      nex_img.style.zIndex =100;/**/
      cur_ul.appendChild(nex_img);/**/

      pre_img.onclick = function(){/**/
        clearInterval(timer);/**/
        get_pre();/**/
        timer=setInterval(get_next,3000)
      }

      nex_img.onclick = function(){/**/
        clearInterval(timer);/**/
        get_next();/**/
        timer=setInterval(get_next,3000)
      }

      let len=sz.length-1
      sz[len-2].style.left ="0px";/**/
      sz[len-1].style.zIndex = 100;/**/
      sz[len-1].style.left = "200px";/**/
      sz[len-1].style.transform = "scale(1.3)";/**/
      sz[len].style.left="400px"

      szdiv[0].style.background="#e431fc"

      for(let i=0;i<szdiv.length;i++){
        szdiv[i].onmouseenter=function(){
          clearInterval(timer)
            let len1 = sz[len-1].id
            let len2 = szdiv[i].name;/**/
            let dis=Math.max(len1,len2)-Math.min(len1,len2)
            if(len1>len2){/**/
              while(dis--)
                get_pre()
            }else{/**/
              while(dis--)
                get_next()
            }
            timer=setInterval(get_next,3000)
        }
      }

      function get_pre(){/**/
        let give_up =sz[0];/**/
        sz.shift();/**/
        sz.push(give_up);/**/
        for(let i=0;i<sz.length;i++){
          sz[i].style.zIndex=i
          sz[i].style.transform="scale(1)"
        }
        sz[len-2].style.left="0px"
        sz[len-1].style.zIndex = 100;/**/
        sz[len-1].style.left = "200px";/**/
        sz[len-1].style.transform = "scale(1.3)";/**/
        sz[len-1].style.opacity=1
        sz[len].style.left="400px"
        sync_szdiv()
      }	

      function get_next(){/**/
        let give_up =sz[len];/**/
        sz.pop();/**/
        sz.unshift(give_up);/**/
        for(let i=0;i<sz.length;i++){
          sz[i].style.zIndex=i
          sz[i].style.transform="scale(1)"
        }
        sz[len-2].style.left="0px"
        sz[len-1].style.zIndex = 100;/**/
        sz[len-1].style.left = "200px";/**/
        sz[len-1].style.transform = "scale(1.3)";/**/
        sz[len-1].style.opacity=1
        sz[len].style.left="400px"
        sync_szdiv()
      }	

      function sync_szdiv(){
        for(let i=0;i<szdiv.length;i++){
          if(szdiv[i].name==sz[len-1].id)
            szdiv[i].style.background="#e431fc"
          else
            szdiv[i].style.background="white"
        }
      }				 
      
						 
    }

  }
}
</script>
<style>
.course-img img{
  width: 267.5px;
  height: 149.2px;
}
#banner::after{
  content:"";
  display:block;
  clear: both;
	visibility: hidden ;
}
#banner{
	list-style: none;/**/
	position: absolute;/**//**/
	padding: 0;/**/
	top: 150px;/**/
  left:calc(50% - 600px);
	margin: auto;/**/
	width:  1200px;/**/
	height: 500px;/**/
  z-index: 999;
}

#banner:hover{
	cursor: pointer;/**/
}

#banner li{
	float:left;/**/
	position: absolute;/**/
  top: 50px;
	transition-duration: 0.8s;/**/
}

#banner div{
  width: 15px;/**/
  height: 15px;/**/
  border: 1px solid rgb(156,156,156);/**/
  bottom: 10px;/**/
  position: absolute;/**/
  background: white;/**/
  border-radius: 50%;
  z-index: 9999;
}


.field{
  padding:5px 0;
  background: #f1f5fb;
  text-align: left;
  border-radius:10px;
  padding-left: 5px;
}
.field .c-333{
  line-height: 46px;
  border-left: 2px solid #71b3f7;
}
.field .allCourse{
  float: right;
  line-height: 46px;
  margin-right: 15px;
  font-size: 18px;
  color: rgb(25, 96, 138);
}
.mySwiper{
  width: 60%;
}
</style>